<template>
  <div>
    <nav-bar>
      <template v-slot:left>&lt;</template>
      <template v-slot:default>图书兄弟</template>
    </nav-bar>

    <div class="banners">
      <img src="@/assets/img.png" alt="">
    </div>

    <recommend-view :recommends="recommends"></recommend-view>

    <tab-control @tabClick="tabClick" :titles="['畅销','新书','精选']"></tab-control>
    <goods-list :goods="showGoods"></goods-list>

  </div>
</template>

<script>
import NavBar from "@/components/common/navbar/NavBar"
import RecommendView from "@/views/home/ChildComps/RecommendView";
import TabControl from "@/components/content/tabControl/TabControl";
import GoodsList from "@/components/content/goods/GoodsList";
import {getHomeAllData, getHomeGoods} from "@/assets/network/home";
import {onMounted, ref, reactive, computed} from "vue";

export default {
  name: "home",
  components: {
    NavBar,
    RecommendView,
    TabControl,
    GoodsList
  },
  setup() {
    const recommends = ref([]);
    const tabClick = (index) => {
      //tab切换
      let types = ['sales','new','recommend']
      currentType.value = types[index]
    }
    let currentType = ref('sales')
    const showGoods = computed(() => {
      return goods[currentType.value].list
    })
    const goods = reactive({
      sales:{
        page: 0,
        list:[]
      },
      new: {
        page: 0,
        list: []
      },
      recommend: {
        page: 0,
        list: []
      }
    })

    onMounted(() => {
      //获取推荐商品列表
      getHomeAllData().then(res => {
        recommends.value = res.goods.data
        console.log(res.goods.data);
      })
      getHomeGoods('sales').then(res => {
        goods.sales.list = res.goods.data
      })
      getHomeGoods('recommend').then(res => {
        goods.recommend.list = res.goods.data
      })
      getHomeGoods('new').then(res => {
        goods.new.list = res.goods.data
      })
    })
    return {
      recommends,
      tabClick,
      showGoods
    }
  }
}
</script>

<style scoped>
.banners img {
  width: 100%;
  height: auto;
  margin-top: 45px;
}
</style>